<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        /**{*/
        /*    margin: 0;*/
        /*    padding: 0;*/
        /*    box-sizing: border-box;*/
        /*    width: 100%;*/
        /*    height: 100%;*/
        /*}*/
        body{
            /*height: 100%;*/
            background-image: url(../photo/yoga2.png);
            /*background-size: cover;*/
            /*background-blend-mode: multiply;*/
        }
    </style>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../js/axios.min.js" type="text/javascript"></script>
    <script src="../js/vue.js" type="text/javascript"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>登录界面</title>
</head>
<body>
<div id="app">
    <el-row style="margin-top: 150px;">
        <el-col :span="8" :offset="8">
            <el-form ref="form" :model="loginForm" label-width="80px">
                <el-form-item label="邮箱">
                    <el-input v-model="loginForm.username" placeholder="请输入登录邮箱"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="loginForm.password" show-password placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即登录</el-button>
                    <el-button @click="forget">忘记密码</el-button>
                    <el-button @click="register">立即注册</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                loginForm: {
                    username: '',
                    password: ''
                },
                linkHtml: ""
            }
        },
        methods: {
            onSubmit() {
                axios.post("/account/login", this.loginForm).then(resp => {
                    if (resp.status===resp.data.code) {
                        console.log(resp.data.data)
                        if(resp.data.data === "教练"){
                            this.linkHtml = 'coachHome.html'
                        }else if(resp.data.data === "学员"){
                            this.linkHtml = 'userHome.html'
                        }
                        this.$message({
                            type: 'success',
                            message: '登录成功，即将跳转'
                        });
                        setTimeout(() => {
                            location.href = this.linkHtml
                        }, 1000)
                    }else{
                        this.$message({
                            type: 'warning',
                            message: '账号或密码错误 请重新输入'
                        });
                    }
                })
            },
            forget() {
                location.href = 'findPass.html'// 忘记密码
            },
            register() {
                location.href = 'register.html'
            }
        }
    })
</script>
</body>
</html>
